<template>
  <el-card>
    <div class="header">
      <div class="header_left">
        <div class="left_search">
          <!-- 顶部搜索框和按钮 -->
          <el-input
            clearable
            v-model="pageInfo.qurey"
            prefix-icon="el-icon-search"
            placeholder="请输入搜索内容"
            style="width: 400px"
            @clear="getSignUpList"
          >
            <el-button slot="append" icon="el-icon-search" @click="getSignUpList"></el-button>
          </el-input>
        </div>
        <div class="left_button">
          <el-button type="primary" @click="exportExcel">导出全部数据</el-button>
        </div>
      </div>
      <div class="header_right">
        <el-button type="primary" @click="back">返回</el-button>
      </div>
    </div>
    <!-- 表格数据区域 -->
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      border
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="signUpStuCard" label="学号" width="180"></el-table-column>
      <el-table-column prop="signUpName" label="姓名" width="100"></el-table-column>
      <el-table-column prop="signUpSex" label="性别" width="50"></el-table-column>
      <el-table-column prop="signUpClass" label="专业班级" width="200"></el-table-column>
      <el-table-column prop="signUpIdCard" label="身份证号" width="200"></el-table-column>
      <el-table-column prop="signUpWeChat" label="微信" width="170"></el-table-column>
      <el-table-column prop="signUpQQ" label="QQ" width="170"></el-table-column>
      <el-table-column prop="signUpPhone" label="联系方式"></el-table-column>
    </el-table>
    <!-- 分页导航栏区域 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      jobName: '',
      //分页查询数据
      pageInfo: {
        //模糊查询的数据
        qurey: '',
        //当前页数
        pageNum: 1,
        //每页显示的数据条数
        pageSize: 5,
        jobId: '',
      },
      //表格数据
      tableData: [],
      //数据总条数
      total: 0,
    };
  },

  created() {
    this.pageInfo.jobId = this.$route.query.jobId;
    this.jobName = this.$route.query.jobName;
    this.getSignUpList();
  },

  methods: {
    async exportExcel() {
      axios({
        url: 'signUp/exportExcel/' + this.pageInfo.jobId,
        method: 'post',
        responseType: 'blob',
      }).then((res) => {
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
        // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
        const elink = document.createElement('a');
        elink.download = decodeURIComponent(this.jobName + '.xlsx');
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      });
    },
    back() {
      this.$router.go(-1);
    },
    handleSizeChange(newSize) {
      this.pageInfo.pageSize = newSize;
      this.getShopList();
    },

    handleCurrentChange(newPageNum) {
      this.pageInfo.pageNum = newPageNum;
      this.getShopList();
    },
    async getSignUpList() {
      this.pageInfo.shopId = this.shopId;
      const { data: res } = await this.$http.get('signUp/getSignUpList', { params: this.pageInfo });
      if (res.code == 1) {
        this.tableData = res.data.records;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].signUpSex == 0 ? (this.tableData[i].signUpSex = '男') : (this.tableData[i].signUpSex = '女');
        }
        this.total = res.data.total;
      } else {
        return this.$message.error('报名信息获取失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header_left {
    display: flex;
    align-items: center;
    .left_search {
      margin-right: 10px;
    }
  }
}
.el-table {
  margin-top: 20px;
}
.page {
  display: flex;
  justify-content: space-evenly;
  margin-top: 25px;
}
</style>